<template>
  <el-dialog style="margin-top:-10vh" title="导入数据确认" :before-close="handleClose" :visible.sync="dialogVisible" width="80%">
    <div>
      <el-table :data="currentPageData" style="width: 100%" border>
        <el-table-column
          type="index"
          label="序号"
          width="60"
          align="center"
          >
        </el-table-column>
        <el-table-column v-for="(val, key, index) in dataOne" :key="index" :prop="key" :label="dataType[key]">
          <template slot-scope="scope">
            <el-input v-model="scope.row[key]" size="small"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column
        label="操作"
        width="180"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="delData(scope.row[keys])"
          >删除</el-button>
        </template>
      </el-table-column>

      </el-table>

      <div>
        <div class="mt10 flex flex-end flex--center">
                <div>
                    <el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange"
                        :current-page="pageInfo.pageSize" :page-sizes="[10, 50, 100, 200, 300, 400, 500]"
                        :page-size="pageInfo.pageNum" layout="total, sizes, prev, pager, next, jumper"
                        :total="pageInfo.total">
                    </el-pagination>
                </div>

            </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm()">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      pageInfo: { pageSize: 1, pageNum: 10, total: 0 },
      dataOne: null,
      dataAll: [],
      dataType: [],
    };
  },
  watch: {
    dialogVisible(nv) {
      if(nv){
        this.initData();
      }
    },
    
  },
  mounted(){
    // console.log(this.dataAray, this.dataChange, this.keys, "uploadParseInit");
    if(this.dataChange){
      this.dataType = this.dataTypeMake(this.dataChange);
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    dataAray: {
      type: Array,
      default: () => { return [] }
    },

    dataChange: {
      type: Object,
      default: () => { return {} }
    },

    keys:{
      type: String,
      default: ""
    }
  },
  computed:{
    currentPageData() {
      const { pageSize, pageNum } = this.pageInfo;
      const start = (pageSize - 1) * pageNum;
      const end = start + pageNum;
      return this.dataAll.slice(start, end);
    }
  },
  methods: {
    initData() {
      console.log(this.dataAray, this.dataChange, this.keys, "this.dataAray");
      this.$nextTick(()=>{
        this.pageInfo.total = this.dataAray.length;
        this.dataAll = [...this.dataAray];
        this.dataOne = this.dataAll[0];
      });
    },
    dataTypeMake(data){
      const swappedObj = Object.entries(data).reduce((acc, [key, value]) => {
        acc[value] = key; // 将 value 作为新 key，原 key 作为新 value
        return acc;
      }, {});
      return swappedObj;
    },
    handleClose(){
      this.$emit("close");
    },
  
    submitForm(){
      this.$emit("submit", this.dataAll);
    },

    delData(type){
      let i = 0;
      for(let item of this.dataAll){
        if(item[this.keys] == type){
          this.dataAll.splice(i, 1);
          break;
        }
        i++;
      }
      return;
    },

     // 选显示条数
     pageSizeChange(val) {
        this.pageInfo.pageNum = val;
        return;
    },
    // 选页
    pageCurrentChange(val) {
        this.pageInfo.pageSize = val;
        return;
    },

  }

}
</script>

<style></style>

